<template>
    <a-modal
        v-model:visible="visible"
        :title="state.title"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirmLoading="loading"
        :width="1200"
    >
        <a-form
            :model="formState"
            :rules="rules"
            ref="formRef"
            :label-col="{ style: 'width:120px' }"
            class="vehicle-form"
        >
            <div class="form-layout">
                <!-- 左侧表单区域 -->
                <div class="form-content">
                    <!-- 基础信息 -->
                    <div class="form-section">
                        <div class="section-title">基础信息</div>
                        <div class="form-row">
                            <a-form-item label="车辆牌照" name="plateLicense" class="form-item" required>
                                <a-input v-model:value="formState.plateLicense" placeholder="请输入" />
                            </a-form-item>
                            <a-form-item label="车架号" name="plateVin" class="form-item" required>
                                <a-input v-model:value="formState.plateVin" placeholder="请输入" />
                            </a-form-item>
                            <a-form-item label="车辆编号" name="vehicleCode" class="form-item" required>
                                <a-input v-model:value="formState.vehicleCode" placeholder="请输入" />
                            </a-form-item>
                        </div>
                        <div class="form-row">
                            <a-form-item label="车企" name="manufacturerId" class="form-item" required>
                                <a-select v-model:value="formState.manufacturerId" placeholder="请选择车企" @change="handleChangeManufacturerId">
                                    <a-select-option v-for="item in props.manufacturerCompanyOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item label="车型" name="vehicleTypeId" class="form-item" required>
                                <a-select v-model:value="formState.vehicleTypeId" placeholder="选择车型">
                                    <a-select-option v-for="item in state.vehicleTypeOptions"  :key="item.id" :value="item.id">{{ item.name }}</a-select-option> 
                                </a-select>
                            </a-form-item>
               
                            <!-- <a-form-item label="运营企业" name="operatorId" class="form-item" required>
                                <a-select v-model:value="formState.operatorId" placeholder="请选择运营企业">
                                    <a-select-option value="1">中通</a-select-option>
                                    <a-select-option value="2">顺丰</a-select-option>
                                    <a-select-option value="3">圆通</a-select-option>
                                </a-select>
                            </a-form-item> -->
                        </div>
                        <div class="form-row">
                            <a-form-item label="紧急联系人" name="linkman" class="form-item" required>
                                <a-input v-model:value="formState.linkman" placeholder="请输入" />
                            </a-form-item>
                            <a-form-item label="联系电话" name="linkTel" class="form-item" required>
                                <a-input v-model:value="formState.linkTel" placeholder="请输入" />
                            </a-form-item>
                        </div>
                        <!-- <div class="form-row">
                            <a-form-item label="车型" name="vehicleTypeId" class="form-item" required>
                                <a-select v-model:value="formState.vehicleTypeId" placeholder="选择车型">
                                    <a-select-option value="1">HT5010XDDB</a-select-option>
                                    <a-select-option value="2">HT5010XDDC</a-select-option>
                                    <a-select-option value="3">HT5010XDDD</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item  class="form-item" >
                            </a-form-item>
                        </div> -->
                    </div>

                    <!-- 接入信息 -->
                    <div class="form-section">
                        <div class="section-title">接入信息</div>
                        <div class="form-row">
                            <a-form-item label="接入状态" name="optStatus" class="form-item" required>
                                <a-select v-model:value="formState.optStatus" placeholder="请选择接入状态">
                                    <a-select-option value="Y">已接入</a-select-option>
                                    <a-select-option value="N">未接入</a-select-option>
                                    <!-- <a-select-option value="3">接入中</a-select-option> -->
                                </a-select>
                            </a-form-item>
                            <a-form-item label="运营生效时间" name="fprq" class="form-item" required>
                                <a-date-picker 
                                    class="noDark" 
                                    @change="handleChangeFprq"
                                    value-format="YYYY-MM-DD"
                                    format="YYYY-MM-DD"
                                    style="width: 100%;" 
                                    v-model:value="formState.fprq" 
                                    placeholder="请选择运营生效时间" 
                                />
                            </a-form-item>
                        </div>
                        <div class="form-row">
                            <a-form-item label="运营截止时间" name="sxrq" class="form-item" required>
                                <a-date-picker 
                                    class="noDark" 
                                    
                                    value-format="YYYY-MM-DD"
                                    format="YYYY-MM-DD"
                                    style="width: 100%;" 
                                    v-model:value="formState.sxrq" 
                                    placeholder="请选择运营截止时间" 
                                />
                            </a-form-item>
                            <a-form-item  class="form-item" >
                            </a-form-item>
                        </div>
                    </div>

                    <!-- 运营信息 -->
                    <div class="form-section">
                        <div class="section-title">运营信息</div>
                        <div class="form-row">
                            <a-form-item label="运营线路" name="lineId" class="form-item">
                                <a-select v-model:value="formState.lineId" placeholder="选择线路">
                                    <a-select-option v-for="item in props.lineOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item  class="form-item" >
                            </a-form-item>
                        </div>
                    </div>
                </div>

                <!-- 右侧图片上传区域 -->
                <div class="upload-section">
                    <div class="upload-title">车辆图片</div>
                    <div class="upload-content">
                        <SQuploadFile 
                            :maxCount="1"
                            :files="formState.imageUrl"
                            @updateFiles="changeVehicleImage"
                            @change="changeVehicleImage"
                        >
                            <template #tip>
                                上传格式为jpg/jpeg/png且大小不超过5MB的图片
                            </template>
                        </SQuploadFile>
                    </div>
                </div>
            </div>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive,defineProps, defineExpose, defineEmits } from 'vue'
import { bizVehicleAdd, bizVehicleUpdate } from '@/service/nmcApi'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs';
import { getVehicleType } from '@/utils/baseData'
const emit = defineEmits(['success']) // 定义success事件
const props = defineProps({
    manufacturerCompanyOptions: {
        type: Array,
        default: () => []
    },
    // vehicleTypeOptions: {
    //     type: Array,
    //     default: () => []
    // },
    lineOptions: {
        type: Array,
        default: () => []
    }
})
const visible = ref(false)
const loading = ref(false)
const formRef = ref()
const state = reactive({
    title: '',
    id: '',
    vehicleTypeOptions: []
})

const formState = reactive({
    plateLicense: '',  //车辆牌照
    plateVin: '',  //车架号
    vehicleCode: '',  //车辆编号
    manufacturerId: null,  //车企
    manufacturerName: '',
    // operatorId: '',
    // operatorName: '',
    linkman: '',  //紧急联系人
    linkTel: '',  //联系电话
    vehicleTypeId: null,  //车型
    vehicleTypeName: '',
    optStatus: 'Y',  //接入状态
    fprq: '',  //运营生效时间
    sxrq: '',  //运营截止时间
    lineId:null,  //运营线路
    lineName: '',  //运营线路名称
    imageUrl: '',  //车辆图片
    isActive: true,  //是否有效
    isDelete: false  //是否删除
})

const rules = {
    plateLicense: [{ required: true, message: '请输入车辆牌照' }],
    plateVin: [{ required: true, message: '请输入车架号' }],
    vehicleCode: [{ required: true, message: '请输入车辆编号' }],
    manufacturerId: [{ required: true, message: '请选择车企' }],
    // operatorId: [{ required: true, message: '请选择运营企业' }],
    linkman: [{ required: true, message: '请输入紧急联系人' }],
    linkTel: [{ required: true, message: '请输入正确的联系电话', trigger: 'blur', pattern: /^1[3-9]\d{9}$/ }],
    vehicleTypeId: [{ required: true, message: '请选择车型' }],
    optStatus: [{ required: true, message: '请选择接入状态' }],
    fprq: [{ required: true, message: '请选择运营生效时间' }],
    sxrq: [{ required: true, message: '请选择运营截止时间' }]
}

const showModal = async (data) => {
    state.title = data.title
    state.id = data.id || ''
    visible.value = true;

    if (data.id) {
        Object.assign(formState, data)
    } else {
        Object.assign(formState, {
            plateLicense: '',
            plateVin: '',
            vehicleCode: '',
            manufacturerId: null,
            manufacturerName: '',
            // operatorId: '',
            // operatorName: '',
            linkman: '',
            linkTel: '',
            vehicleTypeId: null,
            vehicleTypeName: '',
            optStatus: 'Y',
            fprq: '',
            sxrq: '',
            lineId: null,
            lineName: '',
            imageUrl: '',
            isActive: true,
            isDelete: false
        })
    }
  
    
}

const handleChangeManufacturerId = async (value) => {
    formState.vehicleTypeId = null
    state.vehicleTypeOptions = await getVehicleType({
        manufacturerId: value
    })
}

const handleChangeFprq = (value) => {
    console.log(value, 'value');
    formState.sxrq = dayjs(value).add(18, 'month').format('YYYY-MM-DD')
}

// 图片上传处理
const changeVehicleImage = (files) => {
    formState.imageUrl = files
}

const handleOk = () => {
    formRef.value.validate().then(() => {
        loading.value = true
        const params = {
            ...formState
        }
        if (state.id) {
            params.id = state.id
        }
        params.manufacturerName = props.manufacturerCompanyOptions.find(item => item.id === params.manufacturerId)?.name
       
        // params.operatorName = state.operatorOptions.find(item => item.value === params.operatorId)?.label
        params.vehicleTypeName = state.vehicleTypeOptions.find(item => item.id === params.vehicleTypeId)?.name
        params.lineName = props.lineOptions.find(item => item.id === params.lineId)?.name;

        if(params.fprq)params.fprq =params.fprq +' 00:00:00'
        if(params.sxrq)params.sxrq =params.sxrq +' 23:59:59'
        let axiosFn = state.id ? bizVehicleUpdate : bizVehicleAdd;
        axiosFn(params).then(res => {
            if (res.status =='000_0000_0000') {
                message.success(state.id ? '编辑成功！' : '新增成功！')
                visible.value = false
                emit('success') // 触发父组件的success事件
            }
        }).finally(() => {
            loading.value = false
        })
    }).catch(() => {
        // loading.value = false
    })
}

const handleCancel = () => {
    visible.value = false
    formRef.value.resetFields()
}

defineExpose({
    showModal
})
</script>

<style scoped lang="less">
.vehicle-form {
    .form-layout {
        display: flex;
        gap: 24px;
        min-height: 500px;
    }

    .form-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .form-section {
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;

            .form-item {
                flex: 1;
                margin-bottom: 0;

                :deep(.ant-form-item-label) {
                    text-align: left;
                    padding-bottom: 4px;
                }

                :deep(.ant-form-item-control) {
                    width: 100%;
                }

                input,
                :deep(.ant-select-selector) {
                    height: 32px;
                    border-radius: 6px;
                    border: 1px solid #d9d9d9;
                }

                :deep(.ant-picker) {
                    width: 100%;
                }
            }
        }
    }

    .upload-section {
        width: 280px;
        border-left: 1px solid #f0f0f0;
        padding-left: 24px;

        .upload-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

 
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .vehicle-form .form-layout {
        flex-direction: column;
        
        .upload-section {
            width: 100%;
            border-left: none;
            border-top: 1px solid #f0f0f0;
            padding-left: 0;
            padding-top: 24px;
        }
    }
}
</style> 